<template>
  <view class="container" style="padding: 24px; box-sizing: border-box;">
    <!-- 顶部栏 -->
    <view class="top-bar">
      <uni-icons type="undo-filled" size="20" class="top-left" @click="goBack">返回</uni-icons>
    </view>

    <!-- 提示文本框 -->
    <view class="text-box-wrapper">
      <view class="text-box">
      </view>
    </view>

    <!-- 按钮区域 -->
    <view class="btn-area">
		<u-cell-group style="width: 92%; border-radius: 15px; overflow: hidden; background-color: white; box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15);">
			<u-cell
				class="cell"
				icon="car-fill"
				icon-style="font-size: 22px; color: #71B5A0"
				title="斗臂车"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url="/pages/low_poweron_dbc/low_poweron_dbc"
			></u-cell>
			<u-cell
				class="cell"
				icon="coupon-fill"
				icon-style="font-size: 22px; color: #71B5A0"
				title="登高"
				title-style="font-size: 38rpx; font-weight: 600; color: #2c3e50;"
				isLink
				url="/pages/low_poweron_dg/low_poweron_dg"
			></u-cell>
		</u-cell-group>
     <!-- <button @click="to_dbc" class="btn-item">斗臂车</button>
      <button @click="to_dg" class="btn-item">登高</button>
      <button @click="to_dm" class="btn-item">地面</button> -->
    </view>
  </view>
</template>

<script>
export default {
  methods: {
    goBack() {
      uni.navigateBack();
    }
	}
}
</script>

<style>
.container {
	display: flex;
	flex-direction: column;
	justify-content: flex-start;
	align-items: center;
	height: 100vh;
}

.top-bar {
  width: 100%;
  display: flex;
  justify-content: flex-start;
  align-items: center;
  height: 60rpx;
  margin-bottom: 20rpx;
}

.top-left {
	font-size: 28rpx;
	color: black;
	padding: 0 20rpx;
	
}

.text-box-wrapper {
	width: 100%;
	display: flex;
	justify-content: center;
	margin-top: 60rpx; /* 距离顶部一定的间距 */
}

.text-box {
	width: 80%; /* 控制文本框宽度 */
	display: flex;
	padding: 2%;
	justify-content: center;
	align-items: center;
	font-size: 38rpx;
	color: black;
	font-style: oblique;
	font-weight: bold;
	letter-spacing: 0.5em;
}

.btn-area {
	display: flex;
	flex-direction: column;
	justify-content: center;
	align-items: center;
	width: 100%;
	margin-top: 20%; /* 将按钮下移 */
}

.btn-item {
  margin-bottom: 60rpx;
  width: 80%;
  font-weight: 550;
  background-color: #ffff00;
}

/* 修改u-cell-group样式 */
:deep(.u-cell-group) {
	border-radius: 15px !important;
	overflow: hidden;
	box-shadow: 0 8px 20px rgba(0, 0, 0, 0.15) !important;
	background: white !important;
	padding: 10rpx 0;
}

/* 修改u-cell样式 */
:deep(.u-cell) {
	margin: 15rpx 0;
	background: white !important;
	transition: all 0.3s ease;
	padding: 25rpx 30rpx !important;
	height: auto !important;
}

:deep(.u-cell__title) {
	font-size: 32rpx !important;
	line-height: 1.5 !important;
}

:deep(.u-cell:not(:last-child)) {
	border-bottom: 1px solid rgba(113, 181, 160, 0.2) !important;
	margin-bottom: 8rpx;
}

:deep(.u-cell:active) {
	background: rgba(113, 181, 160, 0.08) !important;
	transform: scale(0.98);
}
</style>
